<template>
  <div>
    <el-dialog title="设定地震明细" v-model="open" width="800px" @open="initOpen" append-to-body :before-close="close"
      @close="close">
      <div class="detailItem">
        <el-form :inline="true" :model="formData" ref="queryForm" class="demo-form-inline">
          <el-form-item label="震级：" prop="earthquakeLevel">
            <el-input v-model="formData.earthquakeLevel" placeholder="请输入震级" />
          </el-form-item>
          <el-form-item label="角度：" prop="angleStr">
            <el-input v-model="formData.angleStr" placeholder="请输入角度" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button plain @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="detailItem detailItem-table">
        <el-button plain icon="Delete" @click="batchDelete">批量删除</el-button>
        <el-table :data="setEQDetailList" v-loading="loading" :border="true" stripe @selection-change="selection">
          <el-table-column label="序号" type="selection" align="center" width="50" />
          <el-table-column label="经度" align="center" prop="longitude" />
          <el-table-column label="纬度" align="center" prop="latitude" />
          <el-table-column label="宏观位置" width="200" align="center" prop="macroPosition" />
          <el-table-column label="震级" align="center" prop="earthquakeLevel" />
          <el-table-column label="断层切线角度" align="center" prop="faultTangentAngle" width="120">
            <template #default="{row}">
              <span>{{row.faultTangentAngle!=-1?row.faultTangentAngle: ''}}</span>
            </template>
          </el-table-column>
          <el-table-column label="角度" align="center" prop="angle" />
        </el-table>
        <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="formData.page"
          v-model:limit="formData.rows" @pagination="getList" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="close">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { getDetailPage, detailDelete } from '@/api/earthquakeLossesEstimation/earthquakeSetting'
const props = defineProps({
  open: Boolean,
  longitude: Number,
  latitude: Number,
  ssId:String,
  taskId: String
})
const emits = defineEmits(['update:open', 'getSetEQCensus'])
const route = useRoute()
// const {taskId} = route.query
const data = reactive({
  formData: {
    earthquakeLevel: '',
    angleStr: '',
    page: 1,
    rows: 10
  },
  total: 0,
  setEQDetailList: [],
  deleteIds: '',
  loading: false
})
const { formData, total, setEQDetailList, deleteIds,loading } = toRefs(data)
const {proxy} = getCurrentInstance()

const initOpen = () => {
  getList()
}
// 列表
const getList = () => {
  loading.value = true
  formData.value.longitude = props.longitude
  formData.value.latitude = props.latitude
  formData.value.taskId = props.taskId
  formData.value.ssId = props.ssId;
  getDetailPage(formData.value).then(res => {
    if (res.code == 200) {
      setEQDetailList.value = res.data.rows
      total.value = res.data.total
      loading.value = false
    }
  }).catch(err => {
    loading.value = false
  })
}
// 查询
const handleQuery = () => {
  formData.value.page = 1
  getList()
}
// 重置
const resetQuery = () => {
  proxy.resetForm('queryForm')
  getList()
}
// 批量删除
const selection = (selection) => {
  let ids = selection.map(item => {
    return item.id
  })
  deleteIds.value = ids.join(',')
}
const batchDelete = () => {
  if(!deleteIds) {
    proxy.$modal.msgError('未选中任何删除数据！')
    return
  }
  proxy.$modal.confirm('是否确认删除？').then(() => {
    detailDelete(deleteIds.value).then(res => {
      if(res.code == 200) {
        proxy.$modal.msgSuccess('删除成功！')
        getList()
      }
    })
  }).catch(err => { })
}
const close = () => {
  emits('update:open', false)
  emits('getSetEQCensus')
  proxy.resetForm('queryForm')
}
</script>
<style scoped lang="scss">
.detailItem {
  margin: 10px 0;

  &-table {
    .el-button {
      margin-bottom: 10px;
    }
  }
}

:deep(.el-table) th.el-table__cell {
  border-bottom: 1px solid #e5ebf7 !important;
  border-right: 1px solid #e5ebf7 !important;
}
</style>